<template>
	<view class="content-img">
		<eui-nav-bar ref="EuiNavBarRef" title="企业新闻" color="#000" @onClickRefresh="onClickGoToDetail" />
		<eui-search-bar ref="approveSearch" v-model="searchValue" @confirm="selStoreById" radius="100"
			placeholder="搜索新闻标题" showFilter>
			<template #searchFields>
				<view class="search-fields">
					<view class="center">
						<!-- <eui-card-input v-model="selectTime" :modelValue="selectTime" title="日期" :range="timeList"
							type="radio" alignType="left" @buttonClick="buttonClickTime" />
						<view class="flex date-defined" v-if="selectTime=='自定义'">
							<view class="flex-1"><eui-datetime-picker type="day" v-model="StartDt"
									placeholder="开始日期"></eui-datetime-picker></view>
							<view>-</view>
							<view class="flex-1"><eui-datetime-picker type="day" v-model="EndDt"
									placeholder="结束日期"></eui-datetime-picker></view>
						</view> -->
						<DateCard v-model="selectTime" :modelValue="selectTime" title="日期" type="date" :range="timeList"
							@buttonClick="buttonClickTime"></DateCard>
					</view>
					<view class="bottom flex-1 flex">
						<view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
								style="border: solid 1px rgba(136, 136, 136, 1);font-size: 15px;">重置</view>
						</view>
						<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
							@click="ConfirmCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg button-theme" :class="[theme]"
								style="color: #fff;font-size: 15px;">
								确认</view>
						</view>
						<!-- <eui-button type="max2" title="重置" @click="CancelCondition"></eui-button>
						<eui-button type="max" title="确认" @click="ConfirmCondition"></eui-button> -->
					</view>
				</view>
			</template>
		</eui-search-bar>
	</view>
	<view class="main-view">
		<scroll-view scroll-y lower-threshold='88' @refresherrefresh="onRefresh" @scrolltolower="templateLower"
			:refresher-enabled='true' :refresher-triggered="triggered"
			:style="{width:scrollWidth+'px',height:scrollHeight}">
			<view class="approve-list flex font-size-28 margin-top-20" v-for="(item,index) in dataList" :key="index"
				@click="OpenNewsDetail(item)">
				<view style="position: relative;">
					<image :src="item.c_img_url ? item.c_img_url : '../../../static/img/home_qyxw.png'" @error="setDefaultImage(item)"
						style="width: 200rpx;height: 150rpx;border-radius: 10rpx;" mode="aspectFill"></image>
					<view class="news-radius" v-if="item.c_rev_status=='未阅' || item.c_rev_status=='N'"></view>
				</view>
				<view class="padding-left-20">
					<view class="font-size-30 font-weight-bold ellipsis-1" :style="{width:(scrollWidth-130)+'px'}">
						{{item.c_title}}
					</view>
					<view class="font-size-24 color-888 margin-top-12" style="height: 35px;">
						{{item.c_mk_username}}
					</view>
					<view class="font-size-20 color-888">{{item.c_dt}}</view>
				</view>
			</view>
			<view v-if="dataList.length == 0" class="no-data flex flex-direction-column"
				style="background-color: RGBA(255,255,255,0);">
				<image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
				<view class="color-888 font-size-28">暂无数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup type="ts">
	import { ref } from 'vue';
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import service from '@/common/service';
	import Enjoy from '@/common/enjoy';
	import dateRangUtil from '@/common/dateRangUtil';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import { useThemeStore } from '@/store/themeStore';
	import DateCard from "@/components/DateCard/index"
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20);
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const searchValue = ref('');
	const triggered = ref(false);
	const dataList = ref([]);
	const PageSize = ref(10);
	const CurrentPage = ref(1);
	const RowsCount = ref(0);
	const PageCount = ref(0);
	const EuiNavBarRef = ref(null);
	const approveSearch = ref(null);
	const selectTime = ref('全部');
	const timeList = ref([{
		text: '全部',
		value: '全部',
		dateRang: ['', '']
	},{
		text: "今天",
		value: "今天",
		dateRang: dateRangUtil.getLastToday()
	},{
		text: "昨天",
		value: "昨天",
		dateRang: dateRangUtil.getYesterday()
	},{
		text: "本周",
		value: "本周",
		dateRang: dateRangUtil.getCurrentWeek()
	},{
		text: "上周",
		value: "上周",
		dateRang: dateRangUtil.getLastWeek()
	},{
		text: "近三天",
		value: "近三天",
		dateRang: dateRangUtil.getLast3Day()
	},{
		text: "本月",
		value: "本月",
		dateRang: dateRangUtil.getCurrentMonth()
	},{
		text: "上月",
		value: "上月",
		dateRang: dateRangUtil.getLastMonth()
	},{
		text: "自定义",
		value: "自定义",
		dateRang: "自定义"
	}]);
	const StartDt = ref('');
	const EndDt = ref('');
	
	const selStoreById =()=>{
		onRefresh();
	}
	const CancelCondition = () =>{
		selectTime.value = '全部';
		StartDt.value = '';
		EndDt.value = '';
	}
	const ConfirmCondition = () =>{
		if(selectTime.value=='自定义'){
			if(!StartDt.value||!EndDt.value){
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请选择开始日期、结束日期!',
				});
				return false;
			}
		}else{
			StartDt.value = '';
			EndDt.value = '';
		}
		approveSearch.value.closeDrawer();
		onRefresh();
	}
	const onClickGoToDetail = () =>{
		// EuiNavBarRef.value.closeDrawer();
		// onRefresh();
	}
	// 下拉刷新
	const onRefresh = ()=>{
		if (triggered.value) {
			return false;
		};
		triggered.value = true;
		CurrentPage.value = 1;
		dataList.value = [];
		QueryNewList();
		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = ()=>{
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			QueryNewList();
		}
	}
	const setDefaultImage = (item) => {
		item.c_img_url = "../../../static/img/home_qyxw.png";
	}
	const QueryNewList = () =>{
		service.enjoyShowLoading('正在加载...');
		let st = '';
		let en = '';
		if(selectTime.value=='自定义'){
			st = StartDt.value;
			en = EndDt.value;
		} else if (selectTime.value=='全部'){
			st = '';
			en = '';
		} else {
			let list = timeList.value.filter(item => item.value==selectTime.value);
			if(list.length>0){
				st = list[0].dateRang[0];
				en = selectTime.value=='上周'?list[0].dateRang[2]:list[0].dateRang[1];
			}
		}
		console.log('------------------------------------------LoginStore.EnjoyMain',LoginStore.EnjoyMain);
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40企业新闻",
		        ObjectData: {
					c_userno:mainStore.loginInfo.sUser,
					IsNotPage: false,
					Sql:null,
					PageSize:PageSize.value,
					CurrentPage:CurrentPage.value,
					c_title:searchValue.value,
					c_approvedt_start: st,
					c_approvedt_end:en
				},
		        MethodName: "QueryNewList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					RowsCount.value = ObjectData.RowsCount;
					PageCount.value = ObjectData.PageCount;
					CurrentPage.value = ObjectData.CurrentPage;
					const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '/File/DownloadImage/')
					for (let i = 0; i < ObjectData.ReturnObject.length; i++) {
						dataList.value.push({
							...ObjectData.ReturnObject[i],
							c_img_url: `${imgUrl}${ObjectData.ReturnObject[i].c_preview_imgid}`
						})
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const OpenNewsDetail = e =>{
		console.log("e: " + JSON.stringify(e));
		uni.navigateTo({
			url: './NewsDetail?item='+JSON.stringify(e)
		});
	}
	const buttonClickTime = (e)=>{
		if(e.modelType=='StartDt'){
			selectTime.value='自定义';
			StartDt.value = e.modelValue;
		}else if(e.modelType=='EndDt'){
			selectTime.value='自定义';
			EndDt.value = e.modelValue;
		}else{
			selectTime.value=e.modelType;
		}
	}
	const refreshEventBus = () => {
		CurrentPage.value = 1;
		dataList.value = [];
		searchValue.value = '';
		QueryNewList();
	}
	onReady(()=>{
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".content-img");
				userInfoPage.boundingClientRect(function(data) {
					scrollHeight.value = (res.windowHeight - data.height)+'px';
				}).exec()
			}
		});
	})
	onLoad(()=>{
		QueryNewList();
	})

	defineExpose({
		refreshEventBus,
	})
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		padding: 0 10px;
		background-color: #f2f2f2;
	}

	.approve-list {
		padding: 28rpx 28rpx 28rpx 28rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.font-size-20 {
		font-size: 20rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.font-size-30 {
		font-size: 30rpx;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.color-888 {
		color: #888;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.margin-top-12 {
		margin-top: 12rpx;
	}

	.padding-left-20 {
		padding-left: 20rpx;
	}

	.ellipsis-1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-radius {
		width: 8px;
		height: 8px;
		background-color: rgba(255, 64, 0, 1);
		position: absolute;
		top: -3px;
		right: -3px;
		border-radius: 50%;
	}

	.justify-content-center {
		justify-content: center;
	}

	.align-items-center {
		align-items: center !important;
	}

	.bottom-bg {
		height: 40px;
		border-radius: 20px;
	}
	
	.button-theme {
		background: var(--theme-bgc-color);
	}
	
	.search-fields {
		width: 100%;
		background: #FFFFFF;
	
		.center {
			padding-bottom: 22rpx;
		}
	
		.bottom {
			background: #ffffff;
			border-top: 1rpx solid $uni-line-color;
			display: flex;
			justify-content: center;
			padding: 20rpx;
		}
	}
</style>